<template>
  <div>
    <el-form ref="form"  :model="form" :rules="rules" >
        <el-form-item label="选择下一步"  prop="activityId">
            <el-radio-group v-model="form.activityIndex">
              <el-radio v-for="(item,index)  in grcUserTasks"  :label="index"

              > {{item.activityName}}</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item label="选择审批人"  prop="user">
             <el-select v-model="form.user" placeholder="请选择选择审批人">
                  <el-option v-for="(item,index)  in activityUserList"
                   :label="item.nickName"
                   :value="item.userName"
                   ></el-option>

             </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { startNextGrcUserTask,startPoces } from "@/api/activiti/pocess";
export default {
   name: "pocesStart",
  props: {

    detailDialog: {
    		   type: Object,
    		   default: function () {
    		      return {
    					   id: null,
    					   open: null,
                 // 流程key
                 befinitionKey : null,
                 // 流程id
                 processDefinitionId : null,
                 //流程变量
                 vars :{}
    				   }
    		   },
    },
  },
  data() {
    return{
        form:{
          businessId : this.detailDialog.id,
          befinitionKey: this.detailDialog.befinitionKey,
          processDefinitionId: this.detailDialog.processDefinitionId,
          vars: this.detailDialog.vars,

          remark: "",
          activityIndex: 0 ,
          activityId: "",
          user: "",


        },
        grcUserTasks:[],

        // 表单校验
        rules: {
            activityIndex: [
              { required: true, message: "选择下一步选择不能为空", trigger: "blur" }
            ],
            user: [
              { required: true, message: "选择审批人不能为空", trigger: "blur" }
            ],
        },
    };
  },

  computed: {
    activityUserList: function () {
      if(this.grcUserTasks.length>0){
          return this.grcUserTasks[this.form.activityIndex].userList;
      }
    },
  },

  created() {
       this.initDate();
  },

  watch: {
      /* 监听打开状态 */
      "detailDialog.open": function(newOpen, oldOpen) {
        //显示则刷新
        if (newOpen) {
          console.log( this.$options.name +"监听打开状态", this.detailDialog.id , this.form.befinitionKey)
          this.initDate();
        }
      },

  },

  methods: {
    initDate(){
      this.form.remark=""
      this.form.activityIndex=0

      startNextGrcUserTask(this.form.befinitionKey).then(response => {
            this.grcUserTasks = response.data;
       });
    },

     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate(valid => {
         if (valid) {
           this.form.activityId=this.grcUserTasks[this.form.activityIndex].activityId;

           this.form.vars.remark=this.form.remark;
            //this.msgSuccess(this.form);
             startPoces(this.form).then(response => {
               this.msgSuccess("提交成功");

               this.parentRefresh();


              //  this.getList();
             });

         }
       });
     },
     /* 关闭子页面*/
     cancel() {
       this.detailDialog.open= !this.detailDialog.open
       this.$emit("update:detailDialog", this.detailDialog);
     },
     /* 关闭子页面刷新父页面 */
     parentRefresh(){
        this.cancel();
        this.$emit("doRefresh");
     },
  }



}
</script>

<style>
</style>
